import React from 'react';
import { Switch, Route, NavLink, Redirect } from 'react-router-dom';
import Basic from './Basic';
import Logo from './logo.svg';
import './index.css';

const Home = () => {
  return (
    <div className="home-container">
      {/* 侧边栏 */}
      <div className="sidebar">
        <div className="logo">
          <img src={Logo} alt="" />
          <div className="desc">{'react知命境'}</div>
        </div>
        <div className="navs">
          <NavLink to="/basic" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'basic'}</span>
              </div>
              <span className="info">{'所有基础知识'}</span>
            </div>
          </NavLink>
          <NavLink to="/hooks" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'hooks'}</span>
              </div>
              <span className="info">{'组件化新方案'}</span>
            </div>
          </NavLink>
          <NavLink to="/router" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'router'}</span>
              </div>
              <span className="info">{'页面路由方案'}</span>
            </div>
          </NavLink>
          <NavLink to="/redux" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'redux'}</span>
              </div>
              <span className="info">{'状态管理方案'}</span>
            </div>
          </NavLink>
          <NavLink to="/mobx" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'mobx'}</span>
              </div>
              <span className="info">{'状态管理方案'}</span>
            </div>
          </NavLink>
          <NavLink to="/ts" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'TS'}</span>
              </div>
              <span className="info">{'类型约束升级'}</span>
            </div>
          </NavLink>
          <NavLink to="/practice" className="nav-item" activeClassName="active-menu">
            <div className="container">
              <div className="title">
                <span className="icon"></span>
                <span className="text">{'practice'}</span>
              </div>
              <span className="info">{'各种项目练习'}</span>
            </div>
          </NavLink>
        </div>
      </div>
      {/* 内容区 */}
      <div className="content">
        <Switch>
          <Route path="/basic" component={Basic}></Route>
          <Route path="/hooks">{'hooks'}</Route>
          <Route path="/router">{'router'}</Route>
          <Route path="/redux">{'redux'}</Route>
          <Route path="/mobx">{'mobx'}</Route>
          <Route path="/ts">{'ts'}</Route>
          <Route path="/practice">{'practice'}</Route>
          <Redirect to="/basic"></Redirect>
        </Switch>
      </div>
    </div>
  );
};

export default Home;
